<template>
	<div class="login">
		<div class="login_input">
			<div class="login_head">
				<h1>用户登录</h1>
			</div>
			<div class="user_input">
				<el-row class="mb-4">
					<label>用户名：</label>
					<input type="text" name="login" placeholder="请输入用户名" id="login_user" />
					<i class="icon-user icon-large"></i>
				</el-row>
				<el-row class="mb-4">
					<label>密码：</label>
					<input type="password" name="password" placeholder="请输入密码" id="login_pwd" />
					<i class="icon-lock-1 icon-large"></i>
				</el-row>
				<el-row class="mb-4">
					<label>验证码：</label>
					<input type="text" name="password" placeholder="请输入密码" id="login_pwd" />
					<i class="icon-lock-1 icon-large"></i>
				</el-row>
				<el-row class="mb-5">
					<el-button type="primary" plain @click="login">登录</el-button>
					<el-button type="primary" plain>取消</el-button>
				</el-row>
			</div>
		</div>
		<div class="login_text"></div>
	</div>
</template>

<script setup>
import { reactive } from "vue";
import md5 from "md5";
import { useRouter } from "vue-router";
import { getUserLogin } from "../api/user";
// import axios from "axios";
const userData = reactive({
	account: "",
	password: "",
	code: "",
});

const router = useRouter();

const login = () => {
	// axios.get(
	// 	'/apis/carla/login/userLogin', {
	// 	params: { account: 'dengtao123', password: 'e10adc3949ba59abbe56e057f20f883e' }
	// }).then(res => {
	// 	console.log(res);
	// })
	getUserLogin({ account: userData.account, password: md5(userData.password) }).then(res => {
		console.log(res);
	})
	router.push({ path: "/", name: "home", replace: true });
};

</script>

<style>
.login_head {
	height: 80px;
	font-size: 26px;
	line-height: 80px;
	border-bottom: 2px solid #000;
	margin-bottom: 30px;
}

.login {
	width: 500px;
	height: 680px;
	color: #605144;
}

.mb-4 {
	display: block;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 50px;
}

.mb-5 {
	display: block;
	margin-top: 25px;
	margin-bottom: 15px;
	height: 80px;
}

.mb-4 label {
	display: inline-block;
	width: 100px;
	text-align: right;
	font-size: 20px;
	line-height: 50px;
	height: 50px;
}

.mb-4 input {
	height: 35px;
	width: 250px;
}
</style>
